
<!DOCTYPE html >
<html style="height: 100%; padding: 0px; margin: 0px; background-color: #000000;">
  <head>

    <meta charset="utf-8" http-equiv="X-UA-Compatible" content="chrome=1, IE=edge"/>

    <title>Simple WWT Web Client</title>
    <script src="https://web.wwtassets.org/engine/7/wwtsdk.js"></script>
    <script src="https://code.jquery.com/jquery-1.8.3.min.js"></script>
    <script src="wwt_json_api.js"></script>

    <!-- The following is to avoid scrollbars -->
    <style type="text/css">
      body {overflow:hidden;}
    </style>

    <script>
        $(document).ready(sizeContent);
        $(window).resize(sizeContent);
        function sizeContent() {
        var newHeight = ($("html").height()) + "px";
        var newWidth = ($("html").width()) + "px";
        $("#WWTCanvas").css("height", newHeight);
        $("#WWTCanvas").css("width", newWidth);
        }
    </script>

    <script>
      var wwt;
      var wwt_ready = 0;

      function initialize() {
        wwt = wwtlib.WWTControl.initControl6(
          'WWTCanvas',  // divId
          true,   // startRenderLoop
          -28.9,  // startLat (deg) -- galactic center
          93.6,   // startLng (deg) -- RA = 360 - lng
          240.0,  // startZoom -- 6 * (viewport height in deg)
          'Sky'   // startMode
        );
        wwt.add_ready(wwtReady);
        wwt.add_ready(keyScroll);
      }

      function wwtReady() {

        // We set the initial values of the settings here, because there is no
        // easy way to find out when the Jupyter widget has finished loading
        // and WWT is ready from there.

        wwt.loadImageCollection('https://worldwidetelescope.github.io/pywwt/surveys.xml')
        wwt.setForegroundImageByName('Digitized Sky Survey (Color)')
        wwt.setBackgroundImageByName('Hydrogen Alpha Full Sky Map')
        wwt.setForegroundOpacity(80.0)

        wwt.settings.set_actualPlanetScale(false)
        wwt.settings.set_showConstellationBoundries(false)
        wwt.settings.set_showConstellationFigures(false)
        wwt.settings.set_showConstellationSelection(false)
        //wwt.settings.set_showConstellationPictures(false)//libpng gamma out of range
        //wwt.settings.set_showConstellationLabels(false) // can't make xml request
        wwt.settings.set_constellationBoundryColor('#0000ff')
        wwt.settings.set_constellationFigureColor('#ff0000')
        wwt.settings.set_constellationSelectionColor('#ffff00')
        wwt.settings.set_showCrosshairs(false)
        wwt.settings.set_crosshairsColor('#ffffff')
        wwt.settings.set_showEcliptic(false)
        wwt.settings.set_showGrid(false)
        wwt.settings.set_galacticMode(false)
        wwt.settings.set_showGalacticGrid(false)
        //wwt.settings.set_showGalacticGridText(false) // can't make xml request
        wwt.settings.set_showEclipticGrid(false)
        //wwt.settings.set_showEclipticGridText(false) // can't make xml request
        wwt.settings.set_showAltAzGrid(false)
        //wwt.settings.set_showAltAzGridText(false) // can't make xml request
        wwt.settings.set_localHorizonMode(false)
        wwt.settings.set_locationAltitude(0.0)
        wwt.settings.set_locationLat(47.633)
        wwt.settings.set_locationLng(122.133333)
        wwt.settings.set_solarSystemCosmos(true)
        wwt.settings.set_solarSystemLighting(true)
        wwt.settings.set_solarSystemMilkyWay(true)
        //wwt.settings.set_solarSystemMultiRes(false) // don't think works
        wwt.settings.set_solarSystemOrbits(true)
        //wwt.settings.set_solarSystemOverlays(false) // doesn't work
        wwt.settings.set_solarSystemScale('1')
        wwt.settings.set_solarSystemStars(true)
        //wwt.settings.set_solarSystemCMB(false); // doesn't work?
        //wwt.settings.set_solarSystemMinorPlanets(false) // overloads RAM
        wwt.settings.set_solarSystemMinorOrbits(false)
        wwt.settings.set_solarSystemPlanets(true)

        wwt_ready = 1;

      }

      function keyScroll() {

        // It seems that QWebEngine(Page) hasn't updated all of its JS standards,
        // so we include deprecated methods to accomodate the Qt version in the
        // try/catch clause and the first event listener.

        i = 0;
        var canvas = document.body.getElementsByTagName("canvas")[0];

        function newEvent(action, attributes, deprecated) {
          if (!deprecated)
            var event = new CustomEvent(action);
          else {
            var event = document.createEvent("CustomEvent");
            event.initEvent(action, false, false);
          }
          if (attributes)
            for (var attr in attributes)
              event[attr] = attributes[attr];

          return event;
        }


        var wheelUp = newEvent("wwt-zoom", {deltaY: 53, delta: 53}, true);
        var wheelDn = newEvent("wwt-zoom", {deltaY: -53, delta: -53}, true);

        var mouseLf = newEvent("wwt-move", {movementX: 53, movementY: 0}, true);
        var mouseUp = newEvent("wwt-move", {movementX: 0, movementY: 53}, true);
        var mouseRg = newEvent("wwt-move", {movementX: -53, movementY: 0}, true);
        var mouseDn = newEvent("wwt-move", {movementX: 0, movementY: -53}, true);

        zoomCodes = {"KeyZ": wheelUp, "KeyX": wheelDn,
                     90: wheelUp, 88: wheelDn};
        moveCodes = {"KeyJ": mouseLf, "KeyI": mouseUp,
                     "KeyL": mouseRg, "KeyK": mouseDn,
                     74: mouseLf, 73: mouseUp, 76: mouseRg, 75: mouseDn};

        window.addEventListener("keydown", function(event) {
          // must check the deprecated keyCode property for Qt

          if (zoomCodes.hasOwnProperty(event.code) ||
              zoomCodes.hasOwnProperty(event.keyCode)) {
            var action = zoomCodes.hasOwnProperty(event.code) ?
                         zoomCodes[event.code] : zoomCodes[event.keyCode];
            if (event.shiftKey) { action.shiftKey = 1; }
            else                { action.shiftKey = 0; }
            canvas.dispatchEvent(action);
          }

          if (moveCodes.hasOwnProperty(event.code) ||
              moveCodes.hasOwnProperty(event.keyCode)) {
            var action = moveCodes.hasOwnProperty(event.code) ?
                         moveCodes[event.code] : moveCodes[event.keyCode];
            if (event.shiftKey) { action.shiftKey = 1; }
            else                { action.shiftKey = 0; }
            if (event.altKey) { action.altKey = 1; }
            else               { action.altKey = 0; }
            canvas.dispatchEvent(action);
          }
        });

        canvas.addEventListener("wwt-move", (function(proceed) {
          return function(event) {
            if (!proceed) { return false; }
            proceed = false;

            if (event.shiftKey) { delay = 500; }
            else                { delay = 100; }
            setTimeout(function() {proceed = true}, delay);
            if (event.altKey)
              wwtlib.WWTControl.singleton._tilt(event.movementX, event.movementY);
            else
              wwtlib.WWTControl.singleton.move(event.movementX, event.movementY);
          }
        })(true));

        canvas.addEventListener("wwt-zoom", (function(proceed) {
          return function(event) {
            if (!proceed) { return false; }
            proceed = false;

            if (event.shiftKey) { delay = 500; } // milliseconds
            else                { delay = 100; }
            setTimeout(function() {proceed = true}, delay);

            if (event.deltaY < 0) { wwtlib.WWTControl.singleton.zoom(1.43); }
            else                  { wwtlib.WWTControl.singleton.zoom(0.7); }
          }
        })(true));
      }

    </script>
  </head>

  <body onload="initialize()" style="margin: 0; padding: 0">
      <div id="WWTCanvas" style="width: 100; height: 100; border-style: none; border-width: 0px;"></div>
    </div>

  </body>
</html>
